<template>
	<view>
		<view class="con_top">
			<text>friends</text>
			<text>世事千帆过，前方终会是温柔和月光</text>
		</view>
		<view class="con_form">
			<u-form :model="form" ref="uForm">
				<text>用户名:</text>
				<u-form-item prop="name">
					<u-input v-model="form.userName" placeholder="请输入用户名" input-align="center" height="50" />
				</u-form-item>
				<view style="height: 30rpx;"></view>
				<text>密码:</text>
				<u-form-item>
					<u-input v-model="form.password" placeholder="请输入密码" input-align="center" height="50" :type="type"
						:password-icon="false" />
				</u-form-item>
			</u-form>
			<u-button class="custom-style" shape="circle" @click="submit">登录</u-button>
		</view>
		<u-divider color="#9A9A9A" border-color="#6d6d6d" bg-color="#f2f3f7">您可以选择以下方式登录</u-divider>
		<view class="con_icon">
			<view>
				<image src="../../static/images/navigation/wx.png"></image>
			</view>
			<view>
				<image src="../../static/images/navigation/qq.png"></image>
			</view>
		</view>
		<u-divider color="#4b5ad9" border-color="#6d6d6d" bg-color="#f2f3f7">无帐号?点下面按钮注册</u-divider>
		<u-button class="custom-style2" shape="circle" @click="navClick()">注册</u-button>
	</view>
</template>

<script>
	import wsRequest from "@/util/websocket.js"
	export default {
		data() {
			return {
				type: 'password',
				form: {
					userName: '',
					password: '',
				},
				rules: {
					// name: [{
					// 	required: true,
					// 	message: '请输入姓名',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }]
				}
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$sendRequest({
							url: "/users/login",
							method: 'POST',
							data: this.form,
							success: (res) => {
								if (res.data.code == 200) {
									var icon = plus.nativeObj.View.getViewById("icon");
									if (icon != null) {
										setTimeout(function() {
											icon.remove();
										}, 100);
									}
									uni.setStorageSync('token', res.data.data.token);
									uni.setStorageSync('uuId', res.data.data.uuId);
									uni.setStorageSync('nickname', res.data.data.nickname);
									uni.setStorageSync('icon', res.data.data.icon);
									let websocket = new wsRequest(this.$wsUrl + '/WebSocket/' + res
										.data.data.uuId, 10000) 
									//登录成功后创建全局websocket连接
									Vue.prototype.$socket = websocket
									// uni.postMessage({test: "数据",value:"数据"});
									uni.reLaunch({
										url: "/pages/tabBar/desire/desire", //返回层数，2则上上页
									})
								}
							}
						})
						// this.$refs[ref].validate().then(res => {
						// 	console.log("success");
						// 	uni.request({

						// 		url: 'http://192.168.159.1:8080/users/login',
						// 		method: 'POST',
						// 		header: {
						// 			'content-type': "application/json"
						// 		},
						// 		data: this.form,
						// 		success: res => {
						// 			console.log(res)
						// 			uni.reLaunch({
						// 				url: "/pages/tabBar/desire/desire"
						// 			})
						// 		},
						// 		fail: () => {
						// 			console.log('err', err)
						// 			uni.showToast({
						// 				title: "服务器响应失败，请稍后再试！",
						// 				icon: "error"
						// 			});
						// 		},
						// 		complete: () => {}
						// 	})
						// } else {
						// 	console.log('验证失败');
					}
				});
			},
			//导航点击的跳转处理函数
			navClick() {
				uni.navigateTo({
					url: '/pages/index/registered'
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon != null) {
				setTimeout(function() {
					icon.hide();
				}, 100);
			}
		}
	}
</script>

<style>
	.con_top {
		padding: 90rpx 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 300rpx;
		background-color: #fffffd;
		border-radius: 0px 0px 120px 0px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
		opacity: 0.8;
	}

	.con_top text:first-child {
		margin-top: 10rpx;
		font-size: 80rpx;
		font-weight: bold;
		font-family: my-font;
		color: #7a90fd;
	}

	.con_top text:nth-child(2) {
		font-size: 28rpx;
		font-family: my-font;
		color: #7a90fd;
	}

	.con_form {
		margin-top: 110rpx;
	}

	.con_form text {
		margin-left: 90rpx;
		color: #9A9A9A;
	}

	.u-form-item {
		width: 80%;
		background-color: #fffffd;
		border-radius: 50rpx;
		margin: 10rpx auto;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.con_icon {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.con_icon view {
		margin: 40rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
		box-shadow: 2px 2px 3px 3px rgba(230, 234, 246, 1);
		padding: 15rpx;
	}

	.con_icon image {
		width: 65rpx;
		height: 65rpx;
	}
</style>

<style scoped>
	.custom-style {
		margin-top: 70rpx;
		margin-bottom: 20rpx;
		background-color: #4b5ad9;
		color: white;
		width: 80%;
	}

	.custom-style2 {
		margin-top: 70rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		color: #4b5ad9;
		width: 80%;
		border: 1px solid #4b5ad9;
	}
</style>
